<template>
  <!-- template标签中访问数据不要this -->
  <div>
    <!-- v-on: 作用： 绑定事件 -->
    <!-- 语法： @事件名="..." -->

    <!-- 语法1： @事件名="少量的代码" -->
    <button @click="count--">-1</button>

    <span>{{ count }}</span>

    <!-- 语法2： @事件名="函数名" -->
    <button @click="fn">+1</button>

    <!-- 语法3： @事件名="函数名(参数)" -->
    <button @click="add(5)">+5</button>
    <button @click="add(10)">+10</button>
  </div>
</template>

<script>
export default {
  // 声明数据
  data() {
    return {
      count: 0,
    };
  },
  methods: {
    // 声明函数
    fn() {
      // JS中访问数据， 都要通过this
      this.count++;
    },
    add(num) {
      // this.count = this.count + num;
      this.count += num;
    },
  },
};
</script>

<style>
</style>